<template>
  <div class="favorites-page">
    <div class="mem_tit">
      <span class="fr" style="font-size:12px; color:#555555; font-family:'宋体'; margin-top:5px;">共发现4件</span>我的收藏
    </div>
    <table border="0" class="order_tab" style="width:930px;" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>                                                                                                                                       
          <td align="center" width="420">商品名称</td>
          <td align="center" width="180">价格</td>
          <td align="center" width="270">操作</td>
        </tr>
        <tr v-for="(item, index) in favoriteItems" :key="index">
          <td style="font-family:'宋体';">
            <div class="sm_img"><img :src="item.image" width="48" height="48" /></div>{{ item.name }}
          </td>
          <td align="center">￥{{ item.price }}</td>
          <td align="center">
            <a href="#" @click.prevent="followItem(item)">关注</a>&nbsp; &nbsp; 
            <a href="#" @click.prevent="addToCart(item)" style="color:#ff4e00;">加入购物车</a>&nbsp; &nbsp; 
            <a href="#" @click.prevent="removeItem(item)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Favorites',
  data() {
    return {
      favoriteItems: [
        {
          id: 1,
          name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只',
          price: '456.00',
          image: require('@/assets/images/simg.jpg')
        },
        {
          id: 2,
          name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只',
          price: '456.00',
          image: require('@/assets/images/simg.jpg')
        },
        {
          id: 3,
          name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只',
          price: '456.00',
          image: require('@/assets/images/simg.jpg')
        },
        {
          id: 4,
          name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只',
          price: '456.00',
          image: require('@/assets/images/simg.jpg')
        }
      ]
    }
  },
  methods: {
    followItem(item) {
      this.$message.success(`关注商品: ${item.name}`)
    },
    addToCart(item) {
      this.$message.success(`已将商品"${item.name}"加入购物车`)
    },
    removeItem(item) {
      this.$confirm(`确定删除收藏的商品"${item.name}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.favoriteItems.findIndex(i => i.id === item.id)
        if (index > -1) {
          this.favoriteItems.splice(index, 1)
          this.$message.success('删除成功')
        }
      }).catch(() => {
        // 用户取消删除
      })
    }
  }
}
</script>

<style scoped>
.favorites-page {
  padding: 20px;
}

.mem_tit {
  width: 930px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  color: #333333;
  font-size: 16px;
}

.order_tab {
  background-color: #f6f6f6;
  border-collapse: collapse;
}

.order_tab tr td {
  border-bottom: 1px solid #FFF;
  padding: 15px 10px;
}

.sm_img {
  float: left;
  margin-right: 10px;
}

.fr {
  float: right;
}
</style>